<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Largest Contentful Paint</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/largest-contentful-paint" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Largest Contentful Paint</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/largest-contentful-paint">https://wicg.github.io/largest-contentful-paint</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/largest-contentful-paint">https://github.com/web-platform-tests/wpt/tree/master/largest-contentful-paint</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:yoavweiss@chromium.org">Yoav Weiss</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:npm@chromium.org">Nicolás Peña Moreno</a> (<a class="p-org org" href="https://google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Largest Contentful Paint Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that enables monitoring the largest paint an element triggered on screen.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#sec-intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#sec-elements-exposed"><span class="secno">1.1</span> <span class="content">Elements exposed</span></a>
      <li><a href="#largest-content"><span class="secno">1.2</span> <span class="content">Largest content</span></a>
      <li><a href="#sec-example"><span class="secno">1.3</span> <span class="content">Usage example</span></a>
      <li><a href="#limitations"><span class="secno">1.4</span> <span class="content">Limitations</span></a>
     </ol>
    <li>
     <a href="#sec-largest-contentful-paint"><span class="secno">2</span> <span class="content">Largest Contentful Paint</span></a>
     <ol class="toc">
      <li><a href="#sec-largest-contentful-paint-interface"><span class="secno">2.1</span> <span class="content"><code class="idl"><span>LargestContentfulPaint</span></code> interface</span></a>
     </ol>
    <li>
     <a href="#sec-processing-model"><span class="secno">3</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#sec-add-lcp-entry"><span class="secno">3.1</span> <span class="content">Potentially add LargestContentfulPaint entry</span></a>
      <li><a href="#sec-remove-element-content"><span class="secno">3.2</span> <span class="content">Remove element content</span></a>
      <li><a href="#sec-create-entry"><span class="secno">3.3</span> <span class="content">Create a LargestContentfulPaint entry</span></a>
      <li><a href="#sec-modifications-DOM"><span class="secno">3.4</span> <span class="content">Modifications to the DOM specification</span></a>
      <li><a href="#sec-modifications-HTML"><span class="secno">3.5</span> <span class="content">Modifications to the HTML specification</span></a>
     </ol>
    <li><a href="#sec-security"><span class="secno">4</span> <span class="content">Security &amp; privacy considerations</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="sec-intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#sec-intro"></a></h2>
   <p><em>This section is non-normative.</em> The LargestContentfulPaint API enables developers to gain visibility into the loading and rendering process of the web pages, in order for them to be able to optimize it.</p>
   <p>Developers today don’t have a reliable metric that correlated with their user’s visual rendering experience. Existing metrics such as First Paint and First Contentful Paint focus on initial rendering, but don’t take into account the importance of the painted content, and therefore may indicate times in which the user still does not consider the page useful.</p>
   <p>Largest Contentful Paint (LCP) aims to be a new page-load metric that:</p>
   <ul>
    <li data-md>
     <p>better correlates with user experience than the existing page-load metrics</p>
    <li data-md>
     <p>is easy to understand and reason about</p>
    <li data-md>
     <p>reduces the chance of gaming</p>
   </ul>
   <p>The largest paint during the loading process of the page is likely to signify a meaningful event from the user’s perspective, and is therefore something we want to expose by default to developers, enabling performance teams, analytics providers and lab-based measurement tools to collect those metrics without requiring extra annotation work by the folks creating the content itself.</p>
   <p>The API relies heavily on <span>[ELEMENT-TIMING]</span>, which can be thought of as the low-level primitive that this high-level feature is built on top of. For cases where the content creators are willing to annotate their content and indicate the important points in the page’s loading cycle, Element Timing is the API that will provide them more control over the elements that get reported.</p>
   <h3 class="heading settled" data-level="1.1" id="sec-elements-exposed"><span class="secno">1.1. </span><span class="content">Elements exposed</span><a class="self-link" href="#sec-elements-exposed"></a></h3>
   <p>The Largest Contentful Paint API will only expose element types that are already <a data-link-type="dfn" href="https://wicg.github.io/element-timing/#sec-elements-exposed" id="ref-for-sec-elements-exposed">exposed</a> by the Element Timing API. In this case, there is no need to annotate them with the <code class="highlight">elementtiming</code> attribute.</p>
   <h3 class="heading settled" data-level="1.2" id="largest-content"><span class="secno">1.2. </span><span class="content">Largest content</span><a class="self-link" href="#largest-content"></a></h3>
   <p>The algorithm used for this API keeps track of the content seen so far. Whenever a new largest content is found, a new entry is created for it. Whenever content is removed, that content is no longer considered by the algorithm. In particular, if the content removed was the largest, then a new entry is created for the new largest. The algorithm terminates whenever scroll or input events occur, since those are likely to introduce new content into the website.</p>
   <h3 class="heading settled" data-level="1.3" id="sec-example"><span class="secno">1.3. </span><span class="content">Usage example</span><a class="self-link" href="#sec-example"></a></h3>
   <p>The following example shows an image and a large body of text. The developer then registers an observer that gets candidate entries for the largest paint while the page is loading.</p>
<pre class="example highlight" id="example-85968f20"><a class="self-link" href="#example-85968f20"></a><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"large_image.jpg"</c-><c- p>></c->
<c- p>&lt;</c-><c- f>p</c-> <c- e>id</c-><c- o>=</c-><c- s>'large-paragraph'</c-><c- p>></c->This is large body of text.<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
...
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
<c- kr>const</c-> observer <c- o>=</c-> <c- k>new</c-> PerformanceObserver<c- p>((</c->list<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  <c- a>let</c-> perfEntries <c- o>=</c-> list<c- p>.</c->getEntries<c- p>();</c->
  <c- a>let</c-> lastEntry <c- o>=</c-> perfEntries<c- p>[</c->perfEntries<c- p>.</c->length <c- o>-</c-> <c- mi>1</c-><c- p>];</c->
  <c- c1>// Process the latest candidate for largest contentful paint</c->
<c- p>});</c->
observer<c- p>.</c->observe<c- p>({</c->entryTypes<c- o>:</c-> <c- p>[</c-><c- t>'largest-contentful-paint'</c-><c- p>]});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
   <h3 class="heading settled" data-level="1.4" id="limitations"><span class="secno">1.4. </span><span class="content">Limitations</span><a class="self-link" href="#limitations"></a></h3>
   <p>The LargestContentfulPaint API is based on heuristics. As such, it is error prone. It has the following problems:</p>
   <ul>
    <li data-md>
     <p>The algorithm halts when it detects certain types of user inputs. However, this means that the algorithm will not capture the main content if the user input occurs before the main content is displayed. In fact, the algorithm may produce meaningless results or no results at all if user input occurs very early.</p>
    <li data-md>
     <p>To account for splash screens, content cannot be considered as the largest once it is removed. This presents problems for websites with large image carousels where images rotate automatically. If the image is removed when the next one is painted and the carousel is the largest content, the algorithm will continuously update based on carousel updates.</p>
   </ul>
   <h2 class="heading settled" data-level="2" id="sec-largest-contentful-paint"><span class="secno">2. </span><span class="content">Largest Contentful Paint</span><a class="self-link" href="#sec-largest-contentful-paint"></a></h2>
   <p>Largest Contentful Paint involves the following new interface:</p>
   <h3 class="heading settled" data-level="2.1" id="sec-largest-contentful-paint-interface"><span class="secno">2.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint">LargestContentfulPaint</a></code> interface</span><a class="self-link" href="#sec-largest-contentful-paint-interface"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="largestcontentfulpaint"><code class="highlight"><c- g>LargestContentfulPaint</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="DOMHighResTimeStamp" id="dom-largestcontentfulpaint-rendertime"><code class="highlight"><c- g>renderTime</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="DOMHighResTimeStamp" id="dom-largestcontentfulpaint-loadtime"><code class="highlight"><c- g>loadTime</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-largestcontentfulpaint-size"><code class="highlight"><c- g>size</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-largestcontentfulpaint-id"><code class="highlight"><c- g>id</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-largestcontentfulpaint-url"><code class="highlight"><c- g>url</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="attribute" data-export data-readonly data-type="Element?" id="dom-largestcontentfulpaint-element"><code class="highlight"><c- g>element</c-></code></dfn>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="LargestContentfulPaint" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-largestcontentfulpaint-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-largestcontentfulpaint-tojson"></a></dfn>();
};
</pre>
   <p>Each <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint①">LargestContentfulPaint</a></code> object has these associated concepts:</p>
   <ul>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rendertime">renderTime</dfn>, initially set to 0.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="size">size</dfn>, initially set to 0.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="loadtime">loadTime</dfn>, initially set to 0.</p>
    <li data-md>
     <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="id">id</dfn>, initially set to the empty string.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="url">url</dfn>, initially set to the empty string.</p>
    <li data-md>
     <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="element">element</dfn> containing the associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code>, initially set to <code class="highlight"><c- kc>null</c-></code>.</p>
   </ul>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype">entryType</a></code> attribute’s getter must return the <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②">DOMString</a></code> <code class="highlight"><c- u>"largest-contentful-paint"</c-></code>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name">name</a></code> attribute’s getter must return the value it was initialized to.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime">startTime</a></code> attribute’s getter must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a>’s <a data-link-type="dfn" href="#rendertime" id="ref-for-rendertime">renderTime</a> if it is not 0, and the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a>’s <a data-link-type="dfn" href="#loadtime" id="ref-for-loadtime">loadTime</a> otherwise.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration">duration</a></code> attribute’s getter must return 0.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-rendertime" id="ref-for-dom-largestcontentfulpaint-rendertime">renderTime</a></code> attribute must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object②">context object</a>’s <a data-link-type="dfn" href="#rendertime" id="ref-for-rendertime①">renderTime</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-loadtime" id="ref-for-dom-largestcontentfulpaint-loadtime">loadTime</a></code> attribute must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object③">context object</a>’s <a data-link-type="dfn" href="#loadtime" id="ref-for-loadtime①">loadTime</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-size" id="ref-for-dom-largestcontentfulpaint-size">size</a></code> attribute must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object④">context object</a>’s <a data-link-type="dfn" href="#size" id="ref-for-size">size</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-id" id="ref-for-dom-largestcontentfulpaint-id">id</a></code> attribute must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object⑤">context object</a>’s <a data-link-type="dfn" href="#id" id="ref-for-id">id</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-url" id="ref-for-dom-largestcontentfulpaint-url">url</a></code> attribute must return the value of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object⑥">context object</a>’s <a data-link-type="dfn" href="#url" id="ref-for-url">url</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-element" id="ref-for-dom-largestcontentfulpaint-element">element</a></code> attribute’s getter must return the value returned by running the <a data-link-type="dfn" href="https://wicg.github.io/element-timing/#get-an-element" id="ref-for-get-an-element">get an element</a> algorithm with <a data-link-type="dfn" href="#element" id="ref-for-element②">element</a> and null as inputs.</p>
   <p class="note" role="note"><span>Note:</span> The above algorithm defines that an element that is no longer <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> will no longer be returned by <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-element" id="ref-for-dom-largestcontentfulpaint-element①">element</a></code>'s attribute getter, including elements that are inside a shadow DOM.</p>
   <p>This specification also extends <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> by adding to it a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="largest-contentful-paint-size">largest contentful paint size</dfn> concept, initially set to 0, and a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="largest-content①">largest content</dfn>, initially set to null.
It also adds an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="content-map">content map</dfn>, which is initially an empty <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a>. The <a data-link-type="dfn" href="#content-map" id="ref-for-content-map">content map</a> will be filled with entries with the following format:</p>
   <ul>
    <li data-md>
     <p>The key will be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#pair" id="ref-for-pair">pair</a> with an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> as the first item and a <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#request" id="ref-for-request">Request</a></code> as the second item. This allows identifying the content. The second item will be null for text content.</p>
    <li data-md>
     <p>The value will be a map which contains information that is required to fill up the <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint②">LargestContentfulPaint</a></code> entry. This allows exposing a new <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint③">LargestContentfulPaint</a></code> entry when content is removed from the page.</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> A user agent probably wants to implement the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code>'s associated concepts using a priority queue or binary search tree to avoid the O(n) cost of finding the largest size within <a data-link-type="dfn" href="#content-map" id="ref-for-content-map①">content map</a> when <a data-link-type="dfn" href="#largest-content①" id="ref-for-largest-content①">largest content</a> is removed.</p>
   <h2 class="heading settled" data-level="3" id="sec-processing-model"><span class="secno">3. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="sec-add-lcp-entry"><span class="secno">3.1. </span><span class="content">Potentially add LargestContentfulPaint entry</span><a class="self-link" href="#sec-add-lcp-entry"></a></h3>
   <p class="note" role="note"><span>Note:</span> A user agent implementing the Largest Contentful Paint API would need to include <code class="highlight"><c- u>"largest-contentful-paint"</c-></code> in <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute" id="ref-for-supportedentrytypes-attribute">supportedEntryTypes</a></code> for <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> contexts.
This allows developers to detect support for the API.</p>
   <p>In order to <dfn data-dfn-type="dfn" data-export id="potentially-add-a-largestcontentfulpaint-entry">potentially add a <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint④">LargestContentfulPaint</a></code> entry<a class="self-link" href="#potentially-add-a-largestcontentfulpaint-entry"></a></dfn>, the user agent must run the following steps:</p>
   <div class="algorithm" data-algorithm="LargestContentfulPaint potentially-add-entry">
    <dl>
     <dt data-md>Input
     <dd data-md>
      <p><var>intersectionRect</var>, a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly">DOMRectReadOnly</a></code></p>
     <dd data-md>
      <p><var>imageRequest</var>, a <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#request" id="ref-for-request①">Request</a></code></p>
     <dd data-md>
      <p><var>renderTime</var>, a DOMHighResTimestamp</p>
     <dd data-md>
      <p><var>loadTime</var>, a DOMHighResTimestamp</p>
     <dd data-md>
      <p><var>element</var>, an <a data-link-type="dfn" href="#element" id="ref-for-element④">Element</a></p>
     <dd data-md>
      <p><var>document</var>, a <a data-link-type="dfn" href="https://dom.spec.whatwg.org#concept-document" id="ref-for-concept-document">Document</a></p>
     <dt data-md>Output
     <dd data-md>
      <p>None</p>
      <ol>
       <li data-md>
        <p>Let <var>contentIdentifier</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#pair" id="ref-for-pair①">pair</a> (<var>element</var>, <var>imageRequest</var>).</p>
       <li data-md>
        <p>If <var>document</var>’s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map②">content map</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">contains</a> <var>contentIdentifier</var>, return.</p>
       <li data-md>
        <p>Let <var>window</var> be <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global">relevant global object</a>.</p>
       <li data-md>
        <p>If either of <var>window</var>’s <a data-link-type="dfn" href="#has-dispatched-scroll-event" id="ref-for-has-dispatched-scroll-event">has dispatched scroll event</a> or <a data-link-type="dfn" href="https://wicg.github.io/event-timing#has-dispatched-input-event" id="ref-for-has-dispatched-input-event">has dispatched input event</a> is true, return.</p>
       <li data-md>
        <p>Let <var>url</var> be the empty string.</p>
       <li data-md>
        <p>If <var>imageRequest</var> is not null, set <var>url</var> to be <var>imageRequest</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#dom-request-url" id="ref-for-dom-request-url">request URL</a>.</p>
       <li data-md>
        <p>Let <var>id</var> be <var>element</var>’s <a class="idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org#dom-element-id" id="ref-for-dom-element-id">element id</a>.</p>
       <li data-md>
        <p>Let <var>width</var> be <var>intersectionRect</var>’s <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-width" id="ref-for-dom-domrectreadonly-width">width</a></code>.</p>
       <li data-md>
        <p>Let <var>height</var> be <var>intersectionRect</var>’s <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-height" id="ref-for-dom-domrectreadonly-height">height</a></code>.</p>
       <li data-md>
        <p>Let <var>size</var> be <code class="highlight"><var>width</var> <c- o>*</c-> <var>height</var></code>.</p>
       <li data-md>
        <p>If <var>imageRequest</var> is not null, run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>naturalWidth</var> and <var>naturalHeight</var> be the outputs of running the same steps for an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code>'s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalwidth" id="ref-for-dom-img-naturalwidth">naturalWidth</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalheight" id="ref-for-dom-img-naturalheight">naturalHeight</a></code> attribute getters, but using <var>imageRequest</var> as the image.</p>
         <li data-md>
          <p>Let <var>naturalSize</var> be <code class="highlight"><var>naturalWidth</var> <c- o>*</c-> <var>naturalHeight</var></code>.</p>
         <li data-md>
          <p>Let <var>displayWidth</var> and <var>displayHeight</var> be the outputs of running the same steps for an <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element①">img</a></code>'s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-width" id="ref-for-dom-img-width">width</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-height" id="ref-for-dom-img-height">height</a></code> attribute getters, but using <var>imageRequest</var> as the image.</p>
         <li data-md>
          <p>Let <var>displaySize</var> be <code class="highlight"><var>displayWidth</var> <c- o>*</c-> <var>displayHeight</var></code>.</p>
         <li data-md>
          <p>Let <var>penaltyFactor</var> be <code class="highlight">min<c- p>(</c-><var>displaySize</var><c- p>,</c-> <var>naturalSize</var><c- p>)</c-> <c- o>/</c-> <var>displaySize</var></code>.</p>
         <li data-md>
          <p>Multiply <var>size</var> by <var>penaltyFactor</var>.</p>
        </ol>
       <li data-md>
        <p>Let <var>contentInfo</var> be a map with <var>contentInfo</var>["size"] = <var>size</var>, <var>contentInfo</var>["url"] = <var>url</var>, <var>contentInfo</var>["id"] = <var>id</var>, <var>contentInfo</var>["renderTime"] = <var>renderTime</var>, and <var>contentInfo</var>["loadTime"] = <var>loadTime</var>.</p>
       <li data-md>
        <p>Add a new entry with <var>contentIdentifier</var> as the key and <var>contentInfo</var> as the value to <var>document</var>’s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map③">content map</a>.</p>
       <li data-md>
        <p>If <var>size</var> is smaller or equal to <var>document</var>’s <a data-link-type="dfn" href="#largest-contentful-paint-size" id="ref-for-largest-contentful-paint-size">largest contentful paint size</a>, return.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#create-a-largestcontentfulpaint-entry" id="ref-for-create-a-largestcontentfulpaint-entry">Create a LargestContentfulPaint entry</a> with <var>element</var> and <var>contentInfo</var> as inputs.</p>
      </ol>
    </dl>
   </div>
   <h3 class="heading settled" data-level="3.2" id="sec-remove-element-content"><span class="secno">3.2. </span><span class="content">Remove element content</span><a class="self-link" href="#sec-remove-element-content"></a></h3>
   <p>In order to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="remove-element-content">remove element content</dfn>, the user agent must run the following steps:</p>
   <div class="algorithm" data-algorithm="LargestContentfulPaint remove-element">
    <dl>
     <dt data-md>Input
     <dd data-md>
      <p><var>element</var>, an <a data-link-type="dfn" href="#element" id="ref-for-element⑤">Element</a></p>
     <dd data-md>
      <p><var>document</var>, a <a data-link-type="dfn" href="https://dom.spec.whatwg.org#concept-document" id="ref-for-concept-document①">Document</a></p>
     <dt data-md>Output
     <dd data-md>
      <p>None</p>
      <ol>
       <li data-md>
        <p>For each <var>entry</var> of <var>document</var>’s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map④">content map</a>:</p>
        <ol>
         <li data-md>
          <p>If <var>entry</var>’s key is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#pair" id="ref-for-pair②">pair</a> whose first item is equal to <var>element</var>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-remove" id="ref-for-map-remove">remove</a> <var>entry</var> from <var>document</var>’s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map⑤">content map</a>.</p>
        </ol>
       <li data-md>
        <p>If <var>document</var>’s <a data-link-type="dfn" href="#largest-content①" id="ref-for-largest-content①①">largest content</a> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#pair" id="ref-for-pair③">pair</a> whose first item is not equal to <var>element</var>, then return.</p>
       <li data-md>
        <p>Let <var>largestSize</var> be 0, let <var>largestContentIdentifier</var> be null, and let <var>largestContentInfo</var> be null.</p>
       <li data-md>
        <p>For each <var>key</var> → <var>value</var> of <var>document</var>’s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map⑥">content map</a>:</p>
        <ol>
         <li data-md>
          <p>If <var>value</var>["size"] is greater than <var>largestSize</var>, set <var>largestSize</var> to <var>value</var>["size"], <var>largestContentIdentifier</var> to <var>key</var>, and <var>largestContentInfo</var> to <var>value</var>.</p>
        </ol>
       <li data-md>
        <p>If <var>largestContentIdentifier</var> is not null, <a data-link-type="dfn" href="#create-a-largestcontentfulpaint-entry" id="ref-for-create-a-largestcontentfulpaint-entry①">create a LargestContentfulPaint entry</a> with <var>largestContentIdentifier</var> and <var>largestContentInfo</var> as inputs.</p>
      </ol>
    </dl>
   </div>
   <h3 class="heading settled" data-level="3.3" id="sec-create-entry"><span class="secno">3.3. </span><span class="content">Create a LargestContentfulPaint entry</span><a class="self-link" href="#sec-create-entry"></a></h3>
   <p>In order to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-largestcontentfulpaint-entry">create a <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint⑤">LargestContentfulPaint</a></code> entry</dfn>, the user agent must run the following steps:</p>
   <div class="algorithm" data-algorithm="LargestContentfulPaint create-entry">
    <dl>
     <dt data-md>Input
     <dd data-md>
      <p><var>contentIdentifier</var>, a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#pair" id="ref-for-pair④">pair</a></p>
     <dd data-md>
      <p><var>contentInfo</var>, a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map①">map</a></p>
     <dt data-md>Output
     <dd data-md>
      <p>None</p>
      <ol>
       <li data-md>
        <p>Set <var>document</var>’s <a data-link-type="dfn" href="#largest-content①" id="ref-for-largest-content①②">largest content</a> to <var>contentIdentifier</var>.</p>
       <li data-md>
        <p>Set <var>document</var>’s <a data-link-type="dfn" href="#largest-contentful-paint-size" id="ref-for-largest-contentful-paint-size①">largest contentful paint size</a> to <var>contentInfo</var>["size"].</p>
       <li data-md>
        <p>Let <var>entry</var> be a new <code class="idl"><a data-link-type="idl" href="#largestcontentfulpaint" id="ref-for-largestcontentfulpaint⑥">LargestContentfulPaint</a></code> entry, with it’s <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-size" id="ref-for-dom-largestcontentfulpaint-size①">size</a></code> set to <var>contentInfo</var>["size"], <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-url" id="ref-for-dom-largestcontentfulpaint-url①">url</a></code> set to <var>contentInfo</var>["url"], <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-id" id="ref-for-dom-largestcontentfulpaint-id①">id</a></code> set to <var>contentInfo</var>["id"], <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-rendertime" id="ref-for-dom-largestcontentfulpaint-rendertime①">renderTime</a></code> set to <var>contentInfo</var>["renderTime"], <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-loadtime" id="ref-for-dom-largestcontentfulpaint-loadtime①">loadTime</a></code> set to <var>contentInfo</var>["loadTime"],
   and its <code class="idl"><a data-link-type="idl" href="#dom-largestcontentfulpaint-element" id="ref-for-dom-largestcontentfulpaint-element②">element</a></code> set to <var>contentIdentifier</var>’s first item.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry">Queue the PerformanceEntry</a> <var>entry</var>.</p>
      </ol>
    </dl>
   </div>
   <h3 class="heading settled" data-level="3.4" id="sec-modifications-DOM"><span class="secno">3.4. </span><span class="content">Modifications to the DOM specification</span><a class="self-link" href="#sec-modifications-DOM"></a></h3>
   <p><em>This section will be removed once the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> specification has been modified.</em></p>
   <div class="algorithm" data-algorithm="additions to event dispatch">
     We modify the <a data-link-type="dfn" href="https://dom.spec.whatwg.org#concept-event-dispatch" id="ref-for-concept-event-dispatch">event dispatch algorithm</a> as follows. 
    <p>Right after step 1, we add the following step:</p>
    <ul>
     <li data-md>
      <p>If <var>target</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global①">relevant global object</a> is a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code> object, <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type">type</a></code> is <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll" id="ref-for-eventdef-document-scroll">scroll</a></code> and its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted" id="ref-for-dom-event-istrusted">isTrusted</a></code> is false, set <var>target</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global②">relevant global object</a>'s <a data-link-type="dfn" href="#has-dispatched-scroll-event" id="ref-for-has-dispatched-scroll-event①">has dispatched scroll event</a> to true.</p>
    </ul>
   </div>
   <div class="algorithm" data-algorithm="addition to element removal">
     Add the following step at the end of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org#concept-node-remove" id="ref-for-concept-node-remove">node removal algorithm</a>: 
    <ul>
     <li data-md>
      <p>Call the algorithm to <a data-link-type="dfn" href="#remove-element-content" id="ref-for-remove-element-content">remove element content</a> passing in <var>node</var> and <var>node</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">node document</a>.</p>
    </ul>
   </div>
   <p class="issue" id="issue-9d1c0e2b"><a class="self-link" href="#issue-9d1c0e2b"></a> background image changes or changes in image <code class="highlight">src</code> should trigger removal from the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code>'s <a data-link-type="dfn" href="#content-map" id="ref-for-content-map⑦">content map</a>. <a href="https://github.com/WICG/largest-contentful-paint/issues/41">&lt;https://github.com/WICG/largest-contentful-paint/issues/41></a></p>
   <h3 class="heading settled" data-level="3.5" id="sec-modifications-HTML"><span class="secno">3.5. </span><span class="content">Modifications to the HTML specification</span><a class="self-link" href="#sec-modifications-HTML"></a></h3>
    <em>This section will be removed once the <a data-link-type="biblio" href="#biblio-html">[HTML]</a> specification has been modified.</em> 
   <p>Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②">Window</a></code> has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="has-dispatched-scroll-event">has dispatched scroll event</dfn>, a boolean which is initially set to false.</p>
   <h2 class="heading settled" data-level="4" id="sec-security"><span class="secno">4. </span><span class="content">Security &amp; privacy considerations</span><a class="self-link" href="#sec-security"></a></h2>
   <p>This API relies on Element Timing for its underlying primitives. LCP may expose some element not exposed by Element Timing in case that they are smaller than Element Timing’s limits, but are still the largest elements to be painted up until that point in the page’s loading. That does not seem to expose any sensitive information beyond what Element Timing already enables.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#content-map">content map</a><span>, in §2.1</span>
   <li><a href="#create-a-largestcontentfulpaint-entry">create a LargestContentfulPaint entry</a><span>, in §3.3</span>
   <li>
    element
    <ul>
     <li><a href="#dom-largestcontentfulpaint-element">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#element">definition of</a><span>, in §2.1</span>
    </ul>
   <li><a href="#has-dispatched-scroll-event">has dispatched scroll event</a><span>, in §3.5</span>
   <li>
    id
    <ul>
     <li><a href="#dom-largestcontentfulpaint-id">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#id">definition of</a><span>, in §2.1</span>
    </ul>
   <li><a href="#largest-content①">largest content</a><span>, in §2.1</span>
   <li><a href="#largestcontentfulpaint">LargestContentfulPaint</a><span>, in §2.1</span>
   <li><a href="#largest-contentful-paint-size">largest contentful paint size</a><span>, in §2.1</span>
   <li>
    loadTime
    <ul>
     <li><a href="#dom-largestcontentfulpaint-loadtime">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#loadtime">definition of</a><span>, in §2.1</span>
    </ul>
   <li><a href="#potentially-add-a-largestcontentfulpaint-entry">potentially add a LargestContentfulPaint entry</a><span>, in §3.1</span>
   <li><a href="#remove-element-content">remove element content</a><span>, in §3.2</span>
   <li>
    renderTime
    <ul>
     <li><a href="#dom-largestcontentfulpaint-rendertime">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#rendertime">definition of</a><span>, in §2.1</span>
    </ul>
   <li>
    size
    <ul>
     <li><a href="#dom-largestcontentfulpaint-size">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#size">definition of</a><span>, in §2.1</span>
    </ul>
   <li><a href="#dom-largestcontentfulpaint-tojson">toJSON()</a><span>, in §2.1</span>
   <li>
    url
    <ul>
     <li><a href="#dom-largestcontentfulpaint-url">attribute for LargestContentfulPaint</a><span>, in §2.1</span>
     <li><a href="#url">definition of</a><span>, in §2.1</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-eventdef-document-scroll">
   <a href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll">https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-document-scroll">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-document①">(2)</a> <a href="#ref-for-document②">(3)</a>
    <li><a href="#ref-for-document③">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-element①">(2)</a> <a href="#ref-for-element③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-context-object①">(2)</a> <a href="#ref-for-context-object②">(3)</a> <a href="#ref-for-context-object③">(4)</a> <a href="#ref-for-context-object④">(5)</a> <a href="#ref-for-context-object⑤">(6)</a> <a href="#ref-for-context-object⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-tree-descendant">https://dom.spec.whatwg.org/#concept-tree-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-descendant">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org#concept-document">https://dom.spec.whatwg.org#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-concept-document①">3.2. Remove element content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-element-id">
   <a href="https://dom.spec.whatwg.org#dom-element-id">https://dom.spec.whatwg.org#dom-element-id</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-id">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-dispatch">
   <a href="https://dom.spec.whatwg.org#concept-event-dispatch">https://dom.spec.whatwg.org#concept-event-dispatch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-dispatch">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-istrusted">
   <a href="https://dom.spec.whatwg.org/#dom-event-istrusted">https://dom.spec.whatwg.org/#dom-event-istrusted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-istrusted">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-document">
   <a href="https://dom.spec.whatwg.org/#concept-node-document">https://dom.spec.whatwg.org/#concept-node-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-document">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-remove">
   <a href="https://dom.spec.whatwg.org#concept-node-remove">https://dom.spec.whatwg.org#concept-node-remove</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-remove">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-type">
   <a href="https://dom.spec.whatwg.org/#dom-event-type">https://dom.spec.whatwg.org/#dom-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-type">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-elements-exposed">
   <a href="https://wicg.github.io/element-timing/#sec-elements-exposed">https://wicg.github.io/element-timing/#sec-elements-exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-elements-exposed">1.1. Elements exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-get-an-element">
   <a href="https://wicg.github.io/element-timing/#get-an-element">https://wicg.github.io/element-timing/#get-an-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-an-element">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-has-dispatched-input-event">
   <a href="https://wicg.github.io/event-timing#has-dispatched-input-event">https://wicg.github.io/event-timing#has-dispatched-input-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-dispatched-input-event">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-request">
   <a href="https://fetch.spec.whatwg.org/#request">https://fetch.spec.whatwg.org/#request</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-request①">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-request-url">
   <a href="https://fetch.spec.whatwg.org/#dom-request-url">https://fetch.spec.whatwg.org/#dom-request-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-request-url">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://drafts.fxtf.org/geometry-1/#domrectreadonly">https://drafts.fxtf.org/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-domrectreadonly-height">
   <a href="https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-height">https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectreadonly-height">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-domrectreadonly-width">
   <a href="https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-width">https://drafts.fxtf.org/geometry-1/#dom-domrectreadonly-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectreadonly-width">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time#dom-domhighrestimestamp">https://w3c.github.io/hr-time#dom-domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domhighrestimestamp">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-dom-domhighrestimestamp①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-window①">3.4. Modifications to the DOM specification</a>
    <li><a href="#ref-for-window②">3.5. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-height">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-height">https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-height">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-img-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-img-element">3.1. Potentially add LargestContentfulPaint entry</a> <a href="#ref-for-the-img-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-naturalheight">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalheight">https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalheight</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-naturalheight">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-naturalwidth">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalwidth">https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-naturalwidth</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-naturalwidth">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-global">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-global">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-concept-relevant-global①">3.4. Modifications to the DOM specification</a> <a href="#ref-for-concept-relevant-global②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-img-width">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-width">https://html.spec.whatwg.org/multipage/webappapis.html#dom-img-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-img-width">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-exists">
   <a href="https://infra.spec.whatwg.org/#map-exists">https://infra.spec.whatwg.org/#map-exists</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-exists">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-map">
   <a href="https://infra.spec.whatwg.org/#ordered-map">https://infra.spec.whatwg.org/#ordered-map</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-map">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-ordered-map①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pair">
   <a href="https://infra.spec.whatwg.org/#pair">https://infra.spec.whatwg.org/#pair</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pair">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-pair①">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-pair②">3.2. Remove element content</a> <a href="#ref-for-pair③">(2)</a>
    <li><a href="#ref-for-pair④">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-remove">
   <a href="https://infra.spec.whatwg.org/#map-remove">https://infra.spec.whatwg.org/#map-remove</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-remove">3.2. Remove element content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceentry-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface">https://w3c.github.io/performance-timeline/#the-performanceentry-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceentry-interface">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-duration">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration">https://w3c.github.io/performance-timeline/#dom-performanceentry-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-duration">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-entrytype">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype">https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-entrytype">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-name">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name">https://w3c.github.io/performance-timeline/#dom-performanceentry-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-name">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-queue-a-performanceentry">
   <a href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry">https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-queue-a-performanceentry">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-starttime">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime">https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-starttime">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supportedentrytypes-attribute">
   <a href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute">https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supportedentrytypes-attribute">3.1. Potentially add LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventdef-document-scroll" style="color:initial">scroll</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-descendant" style="color:initial">descendant</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
     <li><span class="dfn-paneled" id="term-for-dom-element-id" style="color:initial">element id</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-dispatch" style="color:initial">event dispatch algorithm</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-istrusted" style="color:initial">isTrusted</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-document" style="color:initial">node document</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-remove" style="color:initial">node removal algorithm</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[element-timing]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-elements-exposed" style="color:initial">exposed</span>
     <li><span class="dfn-paneled" id="term-for-get-an-element" style="color:initial">get an element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[EVENT-TIMING]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-has-dispatched-input-event" style="color:initial">has dispatched input event</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-request" style="color:initial">Request</span>
     <li><span class="dfn-paneled" id="term-for-dom-request-url" style="color:initial">request url</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
     <li><span class="dfn-paneled" id="term-for-dom-domrectreadonly-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-dom-domrectreadonly-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-the-img-element" style="color:initial">img</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-naturalheight" style="color:initial">naturalHeight</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-naturalwidth" style="color:initial">naturalWidth</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-global" style="color:initial">relevant global object</span>
     <li><span class="dfn-paneled" id="term-for-dom-img-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-map-exists" style="color:initial">contain</span>
     <li><span class="dfn-paneled" id="term-for-ordered-map" style="color:initial">map</span>
     <li><span class="dfn-paneled" id="term-for-pair" style="color:initial">pair</span>
     <li><span class="dfn-paneled" id="term-for-map-remove" style="color:initial">remove</span>
    </ul>
   <li>
    <a data-link-type="biblio">[performance-timeline-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-performanceentry-interface" style="color:initial">PerformanceEntry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-entrytype" style="color:initial">entryType</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-dfn-queue-a-performanceentry" style="color:initial">queue the performanceentry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-starttime" style="color:initial">startTime</span>
     <li><span class="dfn-paneled" id="term-for-supportedentrytypes-attribute" style="color:initial">supportedEntryTypes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-event-timing">[EVENT-TIMING]
   <dd><a href="https://wicg.github.io/event-timing/">Event Timing API</a>. Living Standard. URL: <a href="https://wicg.github.io/event-timing/">https://wicg.github.io/event-timing/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-hr-time">[HR-TIME]
   <dd>Jatinder Mann. <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a>. 17 December 2012. REC. URL: <a href="https://www.w3.org/TR/hr-time/">https://www.w3.org/TR/hr-time/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-performance-timeline-2">[PERFORMANCE-TIMELINE-2]
   <dd>Ilya Grigorik. <a href="https://www.w3.org/TR/performance-timeline-2/">Performance Timeline Level 2</a>. 23 April 2019. WD. URL: <a href="https://www.w3.org/TR/performance-timeline-2/">https://www.w3.org/TR/performance-timeline-2/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#largestcontentfulpaint"><code class="highlight"><c- g>LargestContentfulPaint</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp②"><c- n>DOMHighResTimeStamp</c-></a> <a data-readonly data-type="DOMHighResTimeStamp" href="#dom-largestcontentfulpaint-rendertime"><code class="highlight"><c- g>renderTime</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time#dom-domhighrestimestamp" id="ref-for-dom-domhighrestimestamp①①"><c- n>DOMHighResTimeStamp</c-></a> <a data-readonly data-type="DOMHighResTimeStamp" href="#dom-largestcontentfulpaint-loadtime"><code class="highlight"><c- g>loadTime</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-largestcontentfulpaint-size"><code class="highlight"><c- g>size</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-largestcontentfulpaint-id"><code class="highlight"><c- g>id</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-largestcontentfulpaint-url"><code class="highlight"><c- g>url</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥"><c- n>Element</c-></a>? <a data-readonly data-type="Element?" href="#dom-largestcontentfulpaint-element"><code class="highlight"><c- g>element</c-></code></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a href="#dom-largestcontentfulpaint-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> background image changes or changes in image <code class="highlight">src</code> should trigger removal from the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>'s <a data-link-type="dfn" href="#content-map">content map</a>. <a href="https://github.com/WICG/largest-contentful-paint/issues/41">&lt;https://github.com/WICG/largest-contentful-paint/issues/41></a><a href="#issue-9d1c0e2b"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="largestcontentfulpaint">
   <b><a href="#largestcontentfulpaint">#largestcontentfulpaint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-largestcontentfulpaint">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-largestcontentfulpaint①">(2)</a> <a href="#ref-for-largestcontentfulpaint②">(3)</a> <a href="#ref-for-largestcontentfulpaint③">(4)</a>
    <li><a href="#ref-for-largestcontentfulpaint④">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-largestcontentfulpaint⑤">3.3. Create a LargestContentfulPaint entry</a> <a href="#ref-for-largestcontentfulpaint⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-rendertime">
   <b><a href="#dom-largestcontentfulpaint-rendertime">#dom-largestcontentfulpaint-rendertime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-rendertime">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-rendertime①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-loadtime">
   <b><a href="#dom-largestcontentfulpaint-loadtime">#dom-largestcontentfulpaint-loadtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-loadtime">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-loadtime①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-size">
   <b><a href="#dom-largestcontentfulpaint-size">#dom-largestcontentfulpaint-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-size">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-size①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-id">
   <b><a href="#dom-largestcontentfulpaint-id">#dom-largestcontentfulpaint-id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-id">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-id①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-url">
   <b><a href="#dom-largestcontentfulpaint-url">#dom-largestcontentfulpaint-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-url">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-url①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-largestcontentfulpaint-element">
   <b><a href="#dom-largestcontentfulpaint-element">#dom-largestcontentfulpaint-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-largestcontentfulpaint-element">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-dom-largestcontentfulpaint-element①">(2)</a>
    <li><a href="#ref-for-dom-largestcontentfulpaint-element②">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rendertime">
   <b><a href="#rendertime">#rendertime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rendertime">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-rendertime①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="size">
   <b><a href="#size">#size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-size">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="loadtime">
   <b><a href="#loadtime">#loadtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-loadtime">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-loadtime①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="id">
   <b><a href="#id">#id</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-id">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="url">
   <b><a href="#url">#url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url">2.1. LargestContentfulPaint interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element">
   <b><a href="#element">#element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element②">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-element④">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-element⑤">3.2. Remove element content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="largest-contentful-paint-size">
   <b><a href="#largest-contentful-paint-size">#largest-contentful-paint-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-largest-contentful-paint-size">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-largest-contentful-paint-size①">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="largest-content①">
   <b><a href="#largest-content①">#largest-content①</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-largest-content①">2.1. LargestContentfulPaint interface</a>
    <li><a href="#ref-for-largest-content①①">3.2. Remove element content</a>
    <li><a href="#ref-for-largest-content①②">3.3. Create a LargestContentfulPaint entry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-map">
   <b><a href="#content-map">#content-map</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-map">2.1. LargestContentfulPaint interface</a> <a href="#ref-for-content-map①">(2)</a>
    <li><a href="#ref-for-content-map②">3.1. Potentially add LargestContentfulPaint entry</a> <a href="#ref-for-content-map③">(2)</a>
    <li><a href="#ref-for-content-map④">3.2. Remove element content</a> <a href="#ref-for-content-map⑤">(2)</a> <a href="#ref-for-content-map⑥">(3)</a>
    <li><a href="#ref-for-content-map⑦">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="remove-element-content">
   <b><a href="#remove-element-content">#remove-element-content</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-element-content">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-largestcontentfulpaint-entry">
   <b><a href="#create-a-largestcontentfulpaint-entry">#create-a-largestcontentfulpaint-entry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-largestcontentfulpaint-entry">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-create-a-largestcontentfulpaint-entry①">3.2. Remove element content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-dispatched-scroll-event">
   <b><a href="#has-dispatched-scroll-event">#has-dispatched-scroll-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-dispatched-scroll-event">3.1. Potentially add LargestContentfulPaint entry</a>
    <li><a href="#ref-for-has-dispatched-scroll-event①">3.4. Modifications to the DOM specification</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>